<template>
	<view class="content b-t">
		<view class="list b-b" v-for="(item, index) in addressList" :key="index">
			<view class="wrapper" @click="choose(item)">
				<view class="tn-flex tn-flex-direction-row">
					<view class="tn-text-bold tn-text-xxl"> {{ item.person }} </view>
					<view class="tn-text-bold tn-text-xxl tn-margin-left"> {{ item.secretPhone }} </view>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-margin-top address-box">
					<text v-if="item.defaultAddress" class="default-tag">默认</text>
					<text v-if="item.tag" class="normal-tag">{{item.tag}} </text>
					<view class="tn-color-gray--dark"> {{item.area}} - {{item.address}}</view>
				</view>

			</view>
			<text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text>
		</view>


		<button class="add-btn" @click="addAddress('add',addressData)">新增地址</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				source: 0, // 1 表示来自订单创建页面 2 表示来自订单详情
				addressData: {
					"person": "",
					"phone": "",
					"area": "",
					"address": "",
					"tag": "",
					"defaultAddress": false,
				},
				addressList: []
			}
		},
		onLoad(option) {
			this.source = option.source;
			this.list();
		},
		onShow() {
			this.refreshList();
		},
		methods: {
			list() {
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchUserAddressList(),
					method: "get",
					data: {},
					dataType: 'json',
					success: function(result, status) {
						// 查询用户地址列表
						for (let addr of result) {
							addr['secretPhone'] = _this.secretPhone(addr.phone)
						}
						_this.addressList = result;
						console.log('地址列表: {}', _this.addressList);
					},
				});
			},
			secretPhone(phone) {
				let ans = phone;
				if (phone.length > 3) {
					ans = phone.substring(0, 3);
				}
				if (phone.length > 7) {
					ans += '****' + phone.substring(phone.length - 4);
				}
				return ans;
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			//添加或修改成功之后回调
			refreshList() {
				this.list();
				// 添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				// this.addressList.unshift(data);

				console.log("刷新");
			},
			choose(item) {
				console.log('选中的地址是： ', item);
				if (this.source == 1) {
					// 下单页面、订单详情页面 -> 过来的，回传一下选中的地址信息
					// 返回原地址，并携带选中的地址信息过去
					uni.$emit('addrChoose', item);
					uni.navigateBack({delta: 1});
				} else if (this.source == 2) {
					// 订单详情，回传选中的地址信息过去，用于更新选中的地址信息
				}
			}
		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		;
		background: #fff;
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.default-tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.normal-tag {
			font-size: 24upx;
			color: #673ab7;
			margin-right: 10upx;
			background: #f5f3f5;
			border: 1px solid #f5f3f5;
			border-radius: 4upx;
			padding: 8upx 12upx;
			line-height: 1;
		}

		.address {
			font-size: 30upx;
			color: $font-color-dark;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>